<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../static/css/thesame.css" media="all">
	<link rel="stylesheet" href="../static/css/bill/page.css" media="all">
	<link rel="stylesheet" href="../static/css/bill/popCss.css" media="all">
	<link rel="stylesheet" href="../static/css/bill/rightCon.css" media="all">
	<style type="text/css">
		.add-mess-flex .add-mess-child:nth-child(3n+1) > div:nth-child(1) {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 135px;
		    text-align: right;
		}
		.add-mess-flex .add-mess-child:nth-child(3n+1) > div:nth-child(2) {
		    padding-left: 135px;
		    margin-right: 40px;
		}
		.pointer{cursor: pointer}
	</style>
</head>

<body class="layui-layout-body">
	<div class="layui-body pad12px">
		<!-- 内容主体区域 -->
		<div class="layui-box-con relative">
			<div class="layui-left-con layui-left-label-con pad12px">
				<div class="border-radius4 bgWhite box-shadows">
					<div class="new-add-box-scroll">
						<nav class="label-nav-con" lay-filter="buildingFilter">
							<!-- <p class="f16px lh40px" style="padding-left: 33px;">全部</p> -->
							<input type="hidden" id="buildingNo" value="" name="">
							<ul class="lh40px f14px">
								<li  style="padding-left:33px" value=""  class="current">全部</li>
								<li th:each="list:${buildingList}" th:value="${list.buildingNo}"  th:text="${list.buildingName}"></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
			<div class="layui-right-con layui-right-label-con" >
				<div class="border-radius4 bgWhite box-shadows">
					<div class="add-box-scroll">
						<div class="layui-tab layui-tab-time">
<!--							<div class="layui-form layui-tab" lay-filter="isStayBackFilter">-->
<!--								<ul class="layui-tab-title pl25px">-->
<!--									 &lt;!&ndash; 1-否 2-是 &ndash;&gt;-->
<!--									<li value="1" class="layui-this">现有老人</li>-->
<!--									<li value="2">已退住老人</li>-->
<!--									<input type="hidden" id="isStayBack" name="">>-->
<!--								</ul>-->
<!--							</div> -->
							<div class="layui-tab-content bgWhite pad25px">
								<div class="layui-tab-item layui-show">
									<div class="mb25px more-date border-bot1px">
										<div class="add-mess-flex ">
											<div class="add-mess-child">
												<div>
													<label>房间号：</label>
												</div>
												<div class="add-mess-form"> 
													<p>
														<input id="roomName" type="text" placeholder="请输入">
													</p>
												</div>
											</div>
											<div class="add-mess-child">
												<div>
													<label>床号：</label>
												</div>
												<div class="add-mess-form">
													<p style="width: 63.28%;">
														<input id="bedName" type="text" placeholder="请输入">
													</p>
												</div>
											</div>
											<div class="add-mess-child">
												<div>
													<label>姓名：</label>
												</div>
												<div class="add-mess-form">
													<p style="width: 63.28%;">
														<input id="userName" type="text" placeholder="请输入">
													</p>
												</div>
											</div>
											<div class="add-mess-child">
												<div>
													<label>缴费情况：</label>
												</div>
												<div class="add-mess-form">
													<p>
														<select  id="payState" class="form-select">
															<option value ="">请选择</option>
															<option value ="1">欠费</option>
															<option value ="2">平账</option>
															<option value ="3">余额</option>
														</select>
													</p>
												</div>
											</div>
											<div class="add-mess-child">
												<div>
													<label>欠费时间：</label>
												</div>
												<div class="add-mess-form">
													<p style="width: 63.28%;">
														<select  id="arrearMonth" class="form-select">
															<option value ="">请选择</option>
															<option value ="1">0个月</option>
															<option value ="2">1-3个月</option>
															<option value ="3">3个月以上</option>
														</select>
													</p>
												</div>
											</div>
											<div class="add-mess-child">
												<div>
													<label>每月未结算情况：</label>
												</div>
												<div class="add-mess-form">
													<p style="width: 63.28%;">
														<select  id="unSettledMonth" class="form-select">
															<option value ="">请选择</option>
															<option th:each="mth:${monthArr}" th:value="${mth}" th:text ="${mth}+'月'"></option>
														</select>
													</p>
												</div>
											</div>
										</div>
										<div class="pt15px pb15px textRight">
											<p class="layui-btn" onclick="query()">查&nbsp;询</p>
											<p class="layui-btn layui-btn-primary" onclick="reset()">重&nbsp;置</p>
											<!--<p class="green cursor right lh32px ml25px btn-select"><span>展开</span><img src="../static/elderlyInfo/img/select_icon_down.png" class="ml10px"></p>-->
										</div>
									</div>
									<div class="lh32px overflow add-btn-input mb20px">
										<p class="appeal left">
											<span><img th:src="@{/static/img/dot_red.png}">欠费3个月以上</span>
											<span><img th:src="@{/static/img/dot_yellow.png}">欠费1-3个月</span>
											<span><img th:src="@{/static/img/dot_blue.png}">不欠费</span>
										</p>
										<p class="right">
											<span>共有<em class="red fb ml5px mr5px" id="totalNum"></em>条数据</span>
										</p>
									</div>
									<div class="border1px border-radius4 relative mb40px layui-table-img">
										<table class="layui-hide" id="test" lay-filter="test"></table>
										<!-- <div class="number-page">共有<span class="red">120</span>条数据</div> -->
									</div>
								</div>
								<div class="layui-tab-item">
									<article>454545</article>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	<div id="pop-con"  style="display: none;">
		<div class="pop-up" >
			<div>
				<div class="pop-title relative overflow mb15px">
					<span class="ml15px">编辑</span>
					<p class="right"><img src="../static/elderlyInfo/img/close_icon.png" class="block pop-close"><p>
				</div>
				<div class="pop-form mt30px mb30px">
					<div class="layui-form-item">
						<label class="layui-form-label border-box"><span class="red">*</span>身份证号：</label>
						<div class="layui-input-block">
							<input id="add_userPid" type="text" placeholder="请输入身份证" class="layui-input">
						</div>
					</div>
				</div>
				<div class="btn-con textCenter">
					<span class="btn-two" onclick="verificationUserPid()">验&nbsp;证</span>
				</div>
			</div>
		</div>
	</div>


	<div id="nursingStaffInfo" style="display: none;">
		<div class="pop-up">
			<div>
				<div class="pop-title relative overflow mb15px">
					<span class="ml15px">护理员</span>
					<p class="right"><img src="../static/elderlyInfo/img/close_icon.png" class="block pop-close"><p>
				</div>
				<div class="border-top1px mt10px">
					<div class="overflow mt20px mb20px lh32px">
						<p class="left">共有<span id="totalNum2" class="red"></span>条数据</p>
						<div class="add-mess-form-border right relative ml30px">
							<p><input id="searchStaffName" type="text" placeholder="请输入"></p>
							<span onclick="getStaffInfoList()"><img src="../static/elderlyInfo/img/icon_search.png"></span>
						</div>
					</div>
					<article class="pop-box">
						<div class="pop-box-scroll">
							<div class="border1px border-radius4">
								<table class="layui-hide" id="test2" lay-filter="test2"></table>
							</div>
						</div>
					</article>
				</div>
				<div class="btn-con btn-con-position textCenter mt20px">
					<span class="btn-one" onclick="cancelOfLayerOpen()">取&nbsp;消</span>
					<span class="btn-two" onclick="confirmOfLayerOpen()">提&nbsp;交</span>
				</div>
			</div>
		</div>
	</div>



<script src="../static/js/jquery-2.1.3.min.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>

	$(function(){
		layui.use(['element', 'table', 'layer', 'laydate'], function() {
			var laydate = layui.laydate;
			laydate.render({
				elem: '.test-item1',
				trigger: 'click',
			});
			laydate.render({
				elem: '.test-item2',
				trigger: 'click',
			});
			laydate.render({
				elem: '.test-item3',
				trigger: 'click',
			});
			laydate.render({
				elem: '.test-item4',
				trigger: 'click',
			});

		});

		//展开收起
		$('.more-date div.add-mess-child:gt(5)').hide();
		$('.btn-select').click(function() {
			if ($(this).find('img').attr('src') == '../static/elderlyInfo/img/select_icon_down.png') {
				$(this).find('img').attr('src', '../static/elderlyInfo/img/select_icon_up.png').siblings("span").text("收起");
			} else {
				$(this).find('img').attr('src', '../static/elderlyInfo/img/select_icon_down.png').siblings("span").text("展开");
			}
			$('.more-date div.add-mess-child:gt(5)').slideToggle(300);
		})


		//侧边栏选中样式
		$('.label-nav-con li').click(function() {
			$(this).addClass('current').siblings().removeClass('current');
			// console.log($(this).attr("value"));
			if (isNull($(this).attr("value"))) {
				$("#addSpan").css("display","none");
			}else{
				$("#addSpan").css("display","");
			}
			$("#buildingNo").val($(this).attr("value"));
		    query();
		})

		//分页查询
		query();

	})



	//重置
	function reset(){
		$("#roomName").val("");//房间号
		$("#bedName").val("");//床位号
		$("#userName").val("");//姓名
		$("#payState").val("");//缴费情况
		$("#arrearMonth").val("");//欠费时间
		$("#unSettledMonth").val("");//每月未结算情况
		//查询
		query();
	}


	//查询
	function query(){
        //左侧菜单栏
		layui.use(['table'], function() {
			var table = layui.table;
			
			//第一个实例
			table.render({
				elem: '#test'//,url: '/demo/table/user/'
				,url:"../bill/getElderlyInfoPageList"
				,where: getFormDataOfQuery()
				,request: {
					 pageName: 'currentPage' //页码的参数名称，默认：page
					 ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				//,count: 10  //数据总数，从服务端得到
				//,data: listData
				,page: true //开启分页
				,limit:10 //每页显示的条数
				//,limits:[3,4,5]
				,groups: 9 //连续页码个数
				,parseData:function(res){
					if(!isNull(res)){
						return{
							"code":res.code,
							"data":res.data.data,
							"count":res.data.totalCount,
							"limit":res.data.pageSize,
						};
					}
					
				}
				,cols: [
					[ //表头
						{
							field: 'buildingName',
							title: '楼苑',
							//width: '80px',
						}, {
							field: 'roomName',
							title: '房间号',
						//width: '80px',
						}, {
							field: 'bedName',
							title: '床号',
						//width: '80px',
						},{
							field: 'userName',
							title: '姓名',
						//width: '80px',
						},{
							field: 'totalSettleFee',
							title: '总费用（元）',
						},{
							field: 'totalPayFee',
							title: '实缴费用（元）',
						},{
							field: 'curSettleState',
							title: '当月结算',
							templet: function(res){
								var curSettleState = res.curSettleState;
								var dayBalance = res.dayBalance;
								if(curSettleState==1){
									return '已结';
								}else{
									if(dayBalance==0&&curSettleState==0){
										return '无账';
									}else{
										return '未结';
									}

								}

							}
						},{
							field: 'payStation',
							title: '缴费情况',
							templet: function(res){
								var payStation = res.payStation;
								var balance = res.balance;
								if(payStation==1){
									return '<font style="color:red">欠费</font>';
								}else if(payStation==2){
									return '<font style="color:#FFC15E">欠费</font>';
								}else if(payStation==3){
									if(balance>0){
										return '<font style="color:#31A4FF">余额</font>';
									}else{
										return '<font style="color:#31A4FF">平账</font>';
									}

								}

							}
						},{
							field: 'operation',
							title: '操作',
							style: 'color:#1C9399;',
							fixed: 'right',
							templet: function(res){
								return '<div class="table-list-btn pointer"><span onclick="getdetail(\''+res.userNo+'\')">查看</span></div>';
							}
						}
					]
				]
				,done:function(res, curr, count){
				    $("#totalNum").text(count);
				}
			});
		});
	}

	//获取查询时候的参数
	function getFormDataOfQuery(){
		var roomName = $("#roomName").val();//房间号
		var bedName = $("#bedName").val();//房间号
		var userName = $("#userName").val();//姓名
		var payState = $("#payState").val();//缴费情况
		var arrearMonth =  $("#arrearMonth").val();//欠费时间
		var unSettledMonth = $("#unSettledMonth").val();//每月未结算情况
		var buildingNo =  $("#buildingNo").val();
		//console.log(buildingNo);
		var formDate =
            {	
            	roomName : roomName,
            	bedName : bedName,
            	userName : userName,
				payState : payState,
				arrearMonth : arrearMonth,
				unSettledMonth : unSettledMonth,
				buildingNo: buildingNo
            };
        return formDate;
	}




	//查看
	function getdetail(userNo){
		window.location.href="../bill/jumpElderlyInfoDetail?userNo="+userNo
	}




	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}



</script>
</body>

</html>
